<template>
	<view class="vip-container">
		<!-- 表头优化 -->
		<view class="header-row">
			<text class="header-cell">用户信息</text>
			<text class="header-cell">会员状态</text>
		</view>

		<!-- 列表项重构 -->
		<view  class="list-container" >
			<view class="member-card" v-for="(item, index) in memberList" :key="index"
				:class="{'vip-active': item.is_vip}" @click="showDetail(item)">
				<view class="user-meta">
					<text class="user-id">ID: {{item.id}}</text>
					<view class="status-indicator">
						<view class="vip-badge" :class="getVipClass(item.vipType)"></view>
						<text class="status-text">{{ getVipText(item.vipType) }}</text>
					</view>
				</view>
				<view class="vip-progress">
					<view class="progress-bar" :style="{width: getProgressWidth(item.vipType)}"
						:class="getVipClass(item.vipType)"></view>
				</view>
			</view>
			<view v-if="memberList?.length <=0" class="empty-state">
			<uni-icons type="eye" size="48" color="#2b9939"></uni-icons>
			<text class="empty-text">暂无会员记录</text>
			<text class="empty-subtext">快将小程序分享给您的朋友使用吧~</text>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		userApi
	} from '../../../../utils/api.js'
	export default {
		props:{
			memberList:[]
		},
		data() {
			return {
				page:1,
			}
		},
		onLoad() {
			this.getusers();
		},
		methods: {
			
			getVipClass(type) {
				return {
					'free': type === 'free',
					'month': type === 'month',
					'year': type === 'year'
				}
			},
			getVipText(type) {
				const map = {
					free: '免费用户',
					month: '月度VIP',
					year: '年度VIP'
				}
				return map[type] || '未知状态'
			},
			getProgressWidth(type) {
				return {
					free: '30%',
					month: '100%',
					year: '100%'
				} [type]
			}
		}
	}
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  margin-top: 40rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #606266;
  margin: 20rpx 0;
}

.empty-subtext {
  font-size: 26rpx;
  color: #909399;
  text-align: center;
}
	.progress-bar.free {
		background: linear-gradient(90deg, #909399, #c0c4cc);
	}

	.progress-bar.month {
		background: linear-gradient(90deg, #4cd964, #2b9939);
	}

	.progress-bar.year {
		background: linear-gradient(90deg, #f0ad4e, #ff9500);
	}

	.vip-badge.free {
		background: #c0c4cc;
	}

	.vip-badge.month {
		background: #4cd964;
	}

	.vip-badge.year {
		background: #f0ad4e;
	}

	.vip-container {
		padding: 30rpx;
		background: #f8f9fa;
	}

	.header-row {
		display: flex;
		justify-content: space-between;
		padding: 28rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 30rpx;
	}

	.header-cell {
		font-size: 32rpx;
		color: #2b9939;
		font-weight: 500;
	}

	.list-container {
		height: calc(100vh - 240rpx);
	}

	.member-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 20rpx;
		transition: all 0.2s ease;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.member-card:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.user-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-id {
		color: #666;
		font-size: 28rpx;
	}

	.status-indicator {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.vip-badge {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}

	.status-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}

	.vip-progress {
		height: 8rpx;
		background: #eee;
		border-radius: 4rpx;
		margin-top: 20rpx;
	}

	.progress-bar {
		height: 100%;
		background: linear-gradient(90deg, #4cd964, #2b9939);
		border-radius: 4rpx;
		transition: width 0.3s ease;
	}
</style>